<template>
    <div class="play-list-page-container">
        <play-list-detail :id="id"></play-list-detail>
        <song-single-list v-for="(item, index) of songList.arr"
                          :id="item.id"
                          :index="index + 1"
                          :key="index"
                          :arts="item.arts"
                          :album="item.album"
                          :name="item.name"
                          @callNowPlayList="setNowPlayList"></song-single-list>
    </div>
</template>

<script>

import {useRoute} from 'vue-router'
import {useStore} from "vuex";
import {computed, onMounted, reactive, toRaw, watch} from "vue";
import {playListApi} from "../../../api/playListApi.js";
import songSingleList from "./recentPlay/songSingleList.vue";
import playListDetail from "./playListPage/playListDetail.vue";
import { ElLoading } from 'element-plus'
export default {
    name: "playListPage",
    components: {
        songSingleList,
        playListDetail
    },

    setup() {
        let route = useRoute()
        let store = useStore()

        let id = computed(()=> route.query.id)

        let songList = reactive({
            arr:[]
        })



        async function getPlayListSong(id) {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            await playListApi.playListSong(id, res=>{
                res.data.songs.forEach(item=>{
                    let obj = {
                        id:item.id,
                        name:item.name,
                        arts:item.ar,
                        album:item.al
                    }
                    songList.arr.push(obj)
                    loading.close()
                })
            },reason=>{
                console.warn(reason)
                loading.close()
            })
        }

        function setNowPlayList(id) {
            let arr = songList.arr
            for (let item of arr) {
                if (item.id === id) {
                    item.isPlay = true
                } else {
                    item.isPlay = false
                }
            }
            localStorage.setItem('nowPlayList', JSON.stringify(arr))
        }



        watch(id,(newVal)=>{
            songList.arr.length = 0
            getPlayListSong(newVal)
        })

        onMounted(async () => {
            await getPlayListSong(id.value)
        })

        return {
            songList,
            id,
            setNowPlayList,
        }

    }
}
</script>

<style lang="less" scoped>
@import "../../../style";

.play-list-page-container {
    .contain-box;
    overflow-y: scroll;
}
</style>